<script type="text/javascript">

    // 实现图片换页功能
    const spandoms = document.querySelectorAll(".main>nav>span");
    
    for (let spandom of spandoms) {
        spandom.addEventListener("click", function(event) {
            const clickedSpanDom = document.querySelector(".main>nav>span[data-is-clicked=true]");
            clickedSpanDom.style.backgroundColor = "#fff";

            const curPageIndex = clickedSpanDom.innerText;
            let pageIndex = event.target.innerText;
            const parentNode = document.querySelector(".selected");
            const changePage = function(curPageIndex, pageIndex, parentNode) {
                let list = parentNode.children;
                let len = list.length;
                let start,
                    end;
                let total = 15;
                // set none;
                if (curPageIndex * 15 > len) {
                    end = len;
                } else {
                    end = curPageIndex * 15;
                }

                for (let i = (curPageIndex - 1) * 15; i < end; i++) {
                        list[i].style.display = "none";
                }

                // set display
                if ((pageIndex - 1) * 15 >= len) {
                    start = len;
                } else {
                    start = (pageIndex - 1) * 15;
                }

                if (pageIndex * 15 > len) {
                    end = len;
                } else {
                    end = pageIndex * 15;
                }

                for (let i = start; i < end; i++) {
                    list[i].style.display = "inline-block";
                }
            };

            changePage(curPageIndex, pageIndex, parentNode);
            
            clickedSpanDom.dataset.isClicked = "false";
            event.target.dataset.isClicked = "true";
            event.target.style.backgroundColor = "#bbb";
            event.target.style.borderRadius = "4px";
        });
    }
</script>